<template>
	<view class="bg">
		<image class="logo" src="../../static/jxw.png" mode="aspectFit"></image>
		<view class="label">
			<text class="icon cuIcon-phone"></text>
			<input type="text" value="中国(+86)" disabled>
		</view>
		<view class="label" style="margin-top: 60rpx;">
			<text class="icon cuIcon-mobilefill"></text>
			<input type="text" v-model="phone" placeholder="输入手机号" placeholder-style="color:#cccccc">
		</view>
		<view class="label" style="margin-top: 60rpx;">
			<text class="icon cuIcon-lock"></text>
			<input type="password" v-model="password" placeholder="输入密码" placeholder-style="color:#cccccc">
		</view>
		<view class="submit" @click="submit">登录</view>
		<view class="label little">
			<text class="text-gray">忘记密码？</text>
			<a href="javascript:void();" class="text-orange" @click="toResetPass()">重置密码</a>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				password:'',
				role:'',
				version:this.$store.state.version,
			}
		},
		onLoad(option) {
			this.$store.commit('SET_userInfo',{})
			this.role = option.role || '';
		},
		methods: {
			submit(){
				if(this.phone==""||!this.$utils.isMobile(this.phone)){
					uni.showToast({
						icon:"none",
						title:"请正确填写手机号码"
					})
					return false;
				}
				if(this.password==""){
					uni.showToast({
						icon:"none",
						title:"密码不能为空"
					})
					return false;
				}
				const api = this.$request;
				const _self = this;
				api.post(api.url.login,{
					phone:this.phone,
					loginPwd:this.password,
					role:this.role
				},(res)=>{
					if(res.code == 200){
						_self.$store.commit('SET_userInfo',res.body)
						setTimeout(function(){
							uni.hideLoading();
							_self.$common.toIndex();
						},1000)
					}else {
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
				})
			},
			toResetPass:function(){
				uni.reLaunch({
					 url: './resetPass?role='+this.role
				});
			}
		}
	}
</script>

<style lang="less">
	.bg{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: white;
		position: relative;
		.logo{
			display: block;
			width: 160rpx;
			height: 160rpx;
			margin: 100rpx auto 40rpx;
			border-radius: 20rpx;
			box-shadow: 0 10rpx 20rpx 1rpx #CCCCCC;
		}
		view.logo{
			width: 70%;
			font-size: 48rpx;
			font-weight: 600;
			color:#333333;
			box-shadow:none;
		}
		.label{
			width: 70%;
			height: 80rpx;
			margin: 0 auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			z-index: 100;
			.icon{
				font-size: 44rpx;
				margin-right: 20rpx;
				color: #ff813b;
			}
			input{
				width: 100%;
				height: 100%;
				border-bottom: 1rpx solid #CCCCCC;
			}
		}
		.label.little{
			width: 60%;
			margin-top: 32rpx;
			justify-content: space-between;
			color: #ff813b;
		}
		.submit{
			margin: 100rpx auto 0;
			width: 70%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius:10rpx;
			background:linear-gradient(90deg,#f4b349,#ec7136);
			color: #FFFFFF;
		}
		.version{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 10;
			image{
				width: 100%;
			}
			text{
				position: absolute;
				bottom: 20rpx;
				left: 50%;
				transform: translateX(-50%);
				color: #999999;
			}
		}
		
	}
</style>
